<template>
  <div></div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from "vue"
import { showMessage } from "@/utils/messageUtils"
import { Effect } from "element-plus"

// 获取当前组件实例
const { proxy } = getCurrentInstance()

// minemap 弹窗
var popup = new minemap.Popup({
  closeButton: false,
  closeOnClick: false,
})
// 计算多边形面积
const calculatePolygonArea = (features) => {
  let totalAreaInSquareMeters = 0
  features.forEach((feature) => {
    if (feature.geometry.type === "Polygon") {
      // 使用 Turf.js 计算面积（单位：平方米）
      totalAreaInSquareMeters += turf.area(feature)
    }
  })

  // 如果总面积小于 0.01 平方千米（10,000 平方米），使用平方米
  if (totalAreaInSquareMeters < 10000) {
    return { value: totalAreaInSquareMeters, unit: "平方米" }
  } else {
    // 否则使用平方千米
    return { value: totalAreaInSquareMeters / 1000000, unit: "平方千米" }
  }
}
//计算线段长度
const calculateLineLength = (features) => {
  let totalLengthInKilometers = 0

  features.forEach((feature) => {
    if (feature.geometry.type === "LineString") {
      // 使用 Turf.js 计算长度（单位：千米）
      const line = turf.lineString(feature.geometry.coordinates)
      totalLengthInKilometers += turf.length(line, { units: "kilometers" })
    }
  })

  // 如果总长度小于 1 千米，使用米
  if (totalLengthInKilometers < 1) {
    return { value: totalLengthInKilometers * 1000, unit: "米" } // 转换为米
  } else {
    // 否则使用千米
    return { value: totalLengthInKilometers, unit: "千米" }
  }
}

onMounted(() => {
  // 获取全局地图实例
  const map = proxy.$map

  // 监听地图加载完成事件
  map.on("load", function () {
    // 监听地图点击事件
    map.on("click", function (e) {
      // 获取点击的经纬度
      const lng = e.lngLat.lng
      const lat = e.lngLat.lat

      //点击点生成缓冲区
      // var point = turf.point([lng, lat])
      // var buffered = turf.buffer(point, 1, { units: "kilometers" })
      // console.log(buffered)

      // 获取点击位置的要素信息
      const features = map.queryRenderedFeatures(e.point)
      if (!features.length) {
        popup.remove()
        showMessage("点击要素为空，请重新点击！", "error")
        return
      }
      var feature = features[0]

      // 打印要素信息
      console.log("点击位置的要素信息：", features)
      // 根据要素类型生成弹窗内容
      let popupContent = ""
      if (feature.layer.type === "symbol") {
        // 点要素弹窗内容
        const name = feature.properties.name_zh
          ? feature.properties.name_zh
          : feature.properties.name || "未知地点"
        const node = feature.properties.kindcode || "未知编码"
        popupContent = `
            <div class="popup-content">
                <p>地点名称: ${name}</p>
                <p>地点编码: ${node}</p>
                <p>坐标: ${lng.toFixed(6)}, ${lat.toFixed(6)}</p>
                <div class="popup-close-button">关闭</div>
             </div>
        `
      } else if (feature.layer.type === "line") {
        // 线要素弹窗内容
        const sourceLayer = feature.layer["source-layer"] || "未知图层"
        const length = calculateLineLength(features) // 计算线要素长度
        popupContent = `
            <div class="popup-content">
                <p>图层: ${sourceLayer}</p>
                <p>长度: ${length.value.toFixed(2)} ${length.unit}</p>
                <div class="popup-close-button">关闭</div>
            </div>
        `
      } else if (feature.layer.type === "fill") {
        // 多边形要素弹窗内容
        const sourceLayer = feature.layer["source-layer"] || "未知图层"
        const area = calculatePolygonArea(features) // 计算多边形面积
        popupContent = `
            <div class="popup-content">
                 <p>图层: ${sourceLayer}</p>
                 <p>面积: ${area.value.toFixed(2)} ${area.unit}</p>
                <div class="popup-close-button">关闭</div>
            </div>
         `
      } else if (feature.layer.type === "extrusion") {
        // extrusion 要素弹窗内容（暂空）
        popupContent = `
          <div class="popup-content">
            <p>类型:${feature.sourceLayer}</p>
            <p>层数:${feature.properties.levels}</p>
            <div class="popup-close-button">关闭</div>
          </div>
        `
      } else {
        // 未知类型要素弹窗内容
        popupContent = `
          <div class="popup-content">
            <p>未知要素类型</p>
            <p>坐标: ${lng.toFixed(6)}, ${lat.toFixed(6)}</p>
            <div class="popup-close-button">关闭</div>
          </div>
        `
      }

      // 创建一个原生的 DOM 节点
      const popupElement = document.createElement("div")
      popupElement.className = "popup-container"

      // 设置弹窗内容
      popupElement.innerHTML = popupContent

      // 绑定关闭按钮的点击事件
      const closeButton = popupElement.querySelector(".popup-close-button")
      closeButton.addEventListener("click", () => {
        popup.remove() // 关闭弹窗
      })

      popup
        .setLngLat([lng, lat]) // 设置弹窗位置
        .setDOMContent(popupElement) // 设置弹窗内容
        .addTo(map) // 将弹窗添加到地图上
    })
  })
})
</script>

<style>
/* 覆盖 minemap.Popup 的默认样式 */
.minemap-popup-content {
  padding: 0 !important; /* 移除内边距 */
  margin: 0 !important; /* 移除外边距 */
  width: 100% !important; /* 宽度铺满 */
  height: 100% !important; /* 高度铺满 */
}

/* 自定义弹窗容器 */
.popup-container {
  width: 100%; /* 宽度铺满 */
  height: 100%; /* 高度铺满 */
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 弹窗内容 */
.popup-content {
  text-align: left;
  width: 100%; /* 宽度铺满 */
  padding: 10px; /* 内边距 */
}

/* 关闭按钮 */
.popup-close-button {
  color: #475aff;
  text-align: center;
  border: solid 1px #ddd;
  background-color: #f1f2fa;
  padding: 3px 6px;
  cursor: pointer;
  margin-top: 10px;
}

.popup-close-button:hover {
  background-color: #e0e1f0;
}
</style>
